<!DOCTYPE html>
<html lang="en">
    <head>
        <title>NATS</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">   
    </head>
    <body>
        <div id="ee"></div>
        <p>hehe</p>
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li class="active">3</li>
        </ul>

    <script src="js/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/base.js"></script>
    <script>
         //============================================
         /*
         stretch : function(e, len, time, oncomplete) {
        var topRight = parseInt(e.style.right);
        var topWid = e.clientWidth;
        var gap = (len - topWid) - topRight; 

        if (!time)
            time = 500;

        //使用Math.sqrt作为一个简单的“缓动函数”来创建动画
        //精巧的非线性：一开始淡出较快，越来越慢
        var ease = Math.sqrt;

        //动画开始时间
        var start = (new Date()).getTime();
        animate();

        function animate() {
            //已消耗的时间
            var elapsed = (new Date()).getTime() - start;
            //消耗的是总时间的几分之几？
            var fraction = elapsed / time;
            if (fraction < 1) {
                //如果动画还没有完成
                //改变宽度
                var right = topRight + fraction * gap;
                //设置在e上
                e.style.right = right + 'px';
                //调动下一帧
                setTimeout(animate, Math.min(25, time - elapsed));
            } else {
                //否则，动画完成
                e.style.right = '0px';
                //回调事件
                if (oncomplete)
                    oncomplete();
            }
        }

    },

    //收缩函数
    shrink : function (e, len, time, oncomplete){
            var topWid = e.clientWidth;
            var gap = topWid - len;
            
            if(!time) time = 500;
        
            //使用Math.sqrt作为一个简单的“缓动函数”来创建动画
            //精巧的非线性：一开始淡出较快，越来越慢
            var ease = Math.sqrt;
            
            //动画开始时间
            var start = (new Date()).getTime();
            animate();
            
            function animate(){
                //已消耗的时间
                var elapsed = (new Date()).getTime() - start;
                //消耗的是总时间的几分之几？
                var fraction = elapsed/time;
                if(fraction < 1){
                //如果动画还没有完成
                    //改变宽度
                    var wid = topWid - fraction * gap;
                    //设置在e上
                    e.style.right = (wid-233) + 'px';
                    //调动下一帧
                    setTimeout(animate, Math.min(25, time-elapsed));
                }else{
                //否则，动画完成
                    e.style.right = (len-233) + 'px';
                    //$('put-btn').innerHTML = '&gt;';
                    //回调事件
                    if(oncomplete)
                        oncomplete();
                }
            }
    },

    //伸展收缩事件触发函数
    toggle : function(e, minLen, maxLen, time, oncomplete1, oncomplete2){
        var right = parseInt(e.style.right); 
        if(right < 0){
            this.stretch(e, maxLen, time, oncomplete1);
        }else{
            this.shrink(e, minLen, time, oncomplete2);
        }
    },*/
    //===================================================================
/*
    var s = window.location.href;
    alert(s);
    alert($.getUrlVars());
    alert($.getUrlVar('class'));
    $('body').append($.getUrlVar('class'));*/
    $('ul > li').live('click', function(){
        $('ul > li').removeClass('active');
        $(this).addClass('active');
        alert($(this).html());
    })
    </script>
    </body>
</html>

